<template>
    <div>
        <Button type="primary" @click="modalForm = true">添加问题</Button>
        <Table border :columns="columns7" :data="data"></Table>

       <Modal
        v-model="modalForm"
        title="修改或添加相关信息"
        @on-ok="ok"
        @on-cancel="cancel">
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="问题标题" prop="qTitle">
            <Input v-model="formValidate.qTitle" placeholder="请输入您的问题"></Input>
        </FormItem>
        <FormItem label="问题解决方案" prop="qAnswer">
            <Input v-model="formValidate.qAnswer" type="textarea" placeholder="请输入您的解决方案"></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">添加</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
    </Form>             
    <div slot="footer">
        插入相关信息
    </div>
    </Modal>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                columns7: [
                    {
                        title: '问题标题',
                        key: 'qTitle',
                    },
                    {
                        title: '问题解决方案',
                        key: 'qAnswer'
                    },
                    {
                        title: '具体操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row.qId)
                                            // console.log(params.row.qId)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.row.qId)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                modalForm:false,
                formValidate: {
                    qTitle: '',
                    qAnswer: '',
                },
                ruleValidate: {
                    qTitle: [
                        { required: true, message: '问题标题不能为空', trigger: 'blur' }
                    ],
                    qAnswer: [
                        {required: true, message: '问题解决方案不能为空', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.formValidate.qId){
                            // console.log(this.formValidate)
                            this.axios({
                                url:'http://localhost:3000/help/update',
                                method:'post',
                                data:this.formValidate
                            }).then(res=>{
                                this.modalForm=false;
                                this.getData()
                                // console.log(data)
                            })
                        }else{
                             this.axios({
                                url:'http://localhost:3000/help/add',
                                method:'post',
                                data:this.formValidate
                            }).then(res=>{
                                this.modalForm=false;
                                this.getData()
                            })
                        this.$Message.success('添加成功!');
                        }

                    } else {
                        this.$Message.error('添加失败!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            edit (id) {
                this.axios({
                    url:'http://localhost:3000/help/select',
                    method:'post',
                    data:{uId:id}
                }).then(res=>{
                    // console.log(this.formValidate)
                    this.formValidate=res.data[0];
                    this.modalForm=true;
                    // console.log(res.data)
                })
            },
            remove (id) {
                 this.$Modal.confirm({
                    title: '确认删除',
                    content: '<p>您确认删除该问题吗？</p>',
                    onOk: () => {
                        this.axios({
                            url:'http://localhost:3000/help/delete',
                            method:'post',
                            data:{hId:id}
                        }).then(res=>{
                            this.getData()
                        });
                        this.$Message.info('删除成功！');
                    },
                    onCancel: () => {
                        this.$Message.info('已取消');
                    }
                });
            },
            ok () {
                this.$Message.info('Clicked ok');
            },
            cancel () {
                this.$Message.info('Clicked cancel');
            },
            getData(){
                this.axios({
                    url:'http://localhost:3000/help',
                    method:'post',

                }).then(res=>{
                    // console.log(res);
                    // this.data = res.data.rows;
                    // this.total = res.data.total
                    this.data = res.data
                })
            },
        },
        mounted(){
            this.getData()
        },
        watch:{
            modalForm(){
                if(!this.modalForm){
                    let [a,b,c,d]         = ['','','',''];
                        this.formValidate = {name:a,title:b,price:c,pic:d};    

                }
            }
        }
    }
</script>
